<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <SideTree
          :treeData="deptTree"
          height="600px"
          @nodeClick="nodeClick"
          :useButton="false"
        ></SideTree>
      </el-col>
      <el-col :span="20">
        <FxdxVue :parentNode="fxdyParent"></FxdxVue>
      </el-col>
    </el-row>
  </div>
</template>
``
<script setup>
import SideTree from "@/components/SideTree";
import { apis } from "@/api/aqsc/catalogue";
import { deptTreeSelect } from "@/api/system/user";
import FxdxVue from "./components/fxdy.vue";
const { proxy } = getCurrentInstance();
const treeData = ref([]);
const fxdyParent = ref({
  id: null,
});
const getList = () => {
  apis.query({}).then((res) => {
    treeData.value = proxy.handleTree(res.rows, "id", "pid");
  });
};
const form = ref({});
const queryParams = ref({});
function nodeClick(data) {
  fxdyParent.value = data.node;
  form.value.deptId = data.key;
  queryParams.value.deptId = data.key;
}
const deptTree = ref([]);
onMounted(() => {
  getList();
  deptTreeSelect().then((res) => {
    deptTree.value = res.data;
  });
});
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
